<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 8</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script>
  // data & methods & computed & watcher
  // noted:在method中不要写箭头函数 因为箭头函数的this指向的是外层的 会变成window而不是vue实例
  // computed 里写一个函数（完整写法是一个对象里面包含了getter和setter） ，当其依赖发生变化的时候会重新进行计算 

  // method里写一个函数 return count*price 发生变化的时候也能够进行计算，但是区别在于 method在页面重新渲染即发生变化之后就会重新计算，体现在Date.now中 修改了data中的message后会更新
  // 而computed不依赖于data中的message时，不会发生更新
  // computed和watch进行比较，因为watch是命令式的不依赖返回值，计算属性依赖返回值，因此没法做异步任务

  // computed 和 method 都能实现的一个功能，建议使用 computed，因为有缓存
  // computed 和 watcher 都能实现的功能，建议使用 computed 因为更加简洁

  const app = Vue.createApp({
    data() {
      return {
        message: "hello world",
        count: 2,
        price: 5,
        newTotal: 10,
      }
    },
    watch: {
      // price 发生变化时，函数会执行  watch中的current代表目前值，prev代表之前值
      price(current, prev) {
        this.newTotal = current * this.count;
      }
    },
    computed: {
      // 当计算属性依赖的内容发生变更时，才会重新执行计算
      total() {
        return Date.now() + this.count;
        // return this.count * this.price
      }
    },
    methods: {
      formatString(string) {
        return string.toUpperCase();
      },
      // 只要页面重新渲染，才会重新计算
      getTotal() {
        return Date.now();
        // return this.count * this.price;
      },
    },
    template: `
    <div> {{message}} {{newTotal}} </div>
    `
  });
  const vm = app.mount('#root');
</script>

</html>